<template>
  <view class="container">
    <!-- 显示选择的图片，修改mode为aspectFill并调整样式 -->
    <image :src="imageUrl" mode="aspectFill" class="show-image" v-if="imageUrl"></image>
    <!-- 三个功能按钮 -->
    <button @click="chooseImage">选择图片显示</button>
    <button @click="previewImage">预览图片</button>
    <button @click="getImageInfo">获取图片信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 存储选择的图片地址
      tempFilePath: '' // 存储临时文件路径，用于预览和获取信息
    }
  },
  methods: {
    // 选择图片并显示
    chooseImage() {
      uni.chooseImage({
        count: 1, // 只选择1张图片
        sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
        sourceType: ['album', 'camera'], // 可以从相册选择或相机拍摄
        success: (res) => {
          this.tempFilePath = res.tempFilePaths[0]
          this.imageUrl = res.tempFilePaths[0] // 将选择的图片地址赋值给imageUrl，用于显示
        },
        fail: (err) => {
          console.log('选择图片失败', err)
        }
      })
    },
    // 预览图片
    previewImage() {
      if (!this.tempFilePath) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        })
        return
      }
      uni.previewImage({
        current: this.tempFilePath, // 当前显示的图片地址
        urls: [this.tempFilePath] // 需要预览的图片地址列表
      })
    },
    // 获取图片信息
    getImageInfo() {
      if (!this.tempFilePath) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        })
        return
      }
      uni.getImageInfo({
        src: this.tempFilePath,
        success: (info) => {
          uni.showModal({
            title: '图片信息',
            content: `宽度：${info.width}px\n高度：${info.height}px\n类型：${info.type}\n是否原图：${info.original}\n路径：${info.path}`
          })
        },
        fail: (err) => {
          console.log('获取图片信息失败', err)
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.show-image {
  width: 300rpx; /* 调整宽度 */
  height: 200rpx; /* 调整高度，可根据需求修改 */
  border-radius: 20rpx; /* 调整圆角，也可改为0取消圆角 */
  margin-bottom: 30rpx;
}
button {
  width: 100%;
  margin-bottom: 20rpx;
}
</style>